<template>
    <div class="list_mode_cp">
        <el-table
            :data="data_list"
            border
            ref="table_ref"
            @selection-change="on_selection_change"
            @row-click="on_row_click"
            @row-contextmenu="on_row_contextmenu"
            @sort-change="sortChange">
            <el-table-column
                type="selection"
                width="35">
            </el-table-column>
            <el-table-column
                prop="fileName"
                min-width="150px"
                label="名称">
                <template slot-scope="scope">
                    <List_item_cp
                        :data_obj="scope.row">
                    </List_item_cp>
                </template>
            </el-table-column>
            <template
                v-if="data_type == 'share'">
                <el-table-column
                    prop="beUserId"
                    label="分享人"
                    min-width="100px">
                </el-table-column>
                <el-table-column
                    prop="time"
                    label="分享时间"
                    min-width="160px">
                </el-table-column>
                <el-table-column
                    prop="keyWord"
                    label="关键字"
                    min-width="150px">
                </el-table-column>
            </template>
            <template v-else>
                <el-table-column
                    prop="fileType"
                    label="类型"
                    min-width="70px">
                </el-table-column>
                <el-table-column
                    prop="fileTag"
                    label="关键字"
                    min-width="150px">
                </el-table-column>
            </template>

            <el-table-column
                prop="fileSize"
                label="文件大小"
                min-width="90px"
                sortable="custom">
            </el-table-column>
            
            <el-table-column
                prop="fileLevel"
                label="等级"
                min-width="67px">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.fileLevel == 4">非密</el-tag>
                    <el-tag type="warning" v-if="scope.row.fileLevel == 3">内部</el-tag>
                    <el-tag type="danger" v-if="scope.row.fileLevel == 2">秘密</el-tag>
                    <el-tag type="danger" v-if="scope.row.fileLevel == 1">机密</el-tag>
                </template>
            </el-table-column>
        </el-table>
        
        <Contextmenu_two_cp
            v-if="data_type == 'share'"
            v-model="contextmenu_one_show"
            :offset_x="right_event.clientX || 0"
            :offset_y="right_event.clientY || 0">
        </Contextmenu_two_cp>
        <Contextmenu_one_cp
            v-else
            v-model="contextmenu_one_show"
            :offset_x="right_event.clientX || 0"
            :offset_y="right_event.clientY || 0">
        </Contextmenu_one_cp>
    </div>
</template>

<script>
import Contextmenu_one_cp from '@/components/public_cp/contextmenu_one'
import Contextmenu_two_cp from '@/components/public_cp/contextmenu_two'
import List_item_cp from '@/components/public_cp/list_item'
export default {  //文件列表显示（数据来源于调用该组件的视图）
    name: 'List_mode_cp',
    components:{Contextmenu_one_cp,List_item_cp,Contextmenu_two_cp},
    props:{
        data_type:{ //数据的类型，默认为普通，可以为share(分享的数据)
            type:String,
            default:'',
        },
        data_list:{ //数据
            type:Array,
            default:()=>{
                return [];
            },
        },
    },
    data(){
        return{
            selection_items:[], //已选择的文件
            right_event:{}, //右击事件对象
            contextmenu_one_show:false, //控制右击目录的显示
        };
    },
    watch:{
        $route(){
            this.$refs.table_ref.clearSelection();
        },
        '$store.state.update_data'(){ //监听全局更新的状态来决定是否更新文件列表
            this.contextmenu_one_show = false;
        },
    },
    methods:{
        on_selection_change(rows){  //多选点击后触发
            this.selection_items = rows;
            this.$store.commit('set_selection_files',rows);
        },
        on_row_click(row){  //某一行点击后触发
            this.$refs.table_ref.toggleRowSelection(row);
            this.contextmenu_one_show = false;
        },
        on_row_contextmenu(row,column,event){  //莫一行右击点击事件
            //判断文件类型，文件夹不能右击
            this.$refs.table_ref.toggleRowSelection(row,true);
            this.contextmenu_one_show = true;
            this.right_event = event;
        },
        sortChange({order}){ //排序回调方法
            this.$emit("sort-change",order);
        },
    },
}
</script>

<style scoped lang='scss'>
.list_mode_cp{
    width: 100%;
    box-sizing: border-box;
}
</style>
